<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '节目详情',
  },
}
</route>

<script setup>
import ActivityBaseInfo from '@/components/ActivityBaseInfo.vue'
import ContentBox from '@/components/ContentBox.vue'
import ProgrammeApi from '@/service/programme'
import { phoneMask, nameMask } from '@/utils'
import NewVideo from '@/components/NewVideo/index.vue'

onLoad((options) => {
  const { id } = options
  if (id) {
    getProgrammeDetail(id)
  }
})

const detailData = ref({
  contactor: '',
  contactorPhone: '',
  name: '',
  remark: '',
  playerNumber: '',
  duration: '', // 时长
  category_dictText: '',
})
const getProgrammeDetail = async (id) => {
  const { code, result } = await ProgrammeApi.getProgrammeDetail({ id })
  if (code === 200) {
    detailData.value = result
  }
}
const infoDescList = computed(() => {
  const { contactor, contactorPhone, playerNumber, duration } = detailData.value
  return [
    { label: '节目类型', value: detailData.value.category_dictText },
    { label: '节目时长(分钟)', value: duration },
    { label: '参与人数', value: playerNumber },
    { label: '联系人', value: nameMask(contactor) },
    { label: '联系电话', value: phoneMask(contactorPhone), showCallBtn: true },
  ]
})

const imageList = computed(() => {
  return detailData.value.displayImageUrl
    ? detailData.value.displayImageUrl.split(',')
    : []
})

const videoList = computed(() => {
  return detailData.value.displayVideoUrl
    ? detailData.value.displayVideoUrl.split(',')
    : []
})

const swiperList = computed(() => {
  return detailData.value.coverUrl ? detailData.value.coverUrl.split(',') : []
})
</script>

<template>
  <view class="common-page-bg">
    <view class="p-24rpx pb-60rpx">
      <template v-if="detailData.coverUrl">
        <view
          v-if="swiperList.length > 1"
          class="mb-24rpx"
        >
          <wd-swiper
            :list="swiperList"
            autoplay
            stop-autoplay-when-video-play
            :autoplay-video="false"
            :indicator="{ type: 'dots-bar' }"
          ></wd-swiper>
        </view>
        <view
          v-else
          class="mb-24rpx"
        >
          <wd-img
            custom-class="w-full h-400rpx"
            round
            radius="16rpx"
            :src="detailData.coverUrl"
            :preview-src="detailData.coverUrl"
            enable-preview
            mode="aspectFill"
          />
        </view>
      </template>
      <ActivityBaseInfo
        :desc-list="infoDescList"
        :name="detailData.name"
        :phone="detailData.contactorPhone"
      />
      <view class="h-24rpx"></view>
      <ContentBox
        title="节目介绍"
        :content="detailData.remark"
      />
      <view class="h-24rpx"></view>
      <ContentBox
        v-if="imageList.length"
        title="展示图片"
      >
        <wd-img
          v-for="item in imageList"
          :key="item"
          custom-class="mr-16rpx mb-16rpx"
          round
          radius="8rpx"
          :width="100"
          :height="100"
          :src="item"
          :preview-src="item"
          enable-preview
        />
      </ContentBox>
      <view class="h-24rpx"></view>
      <ContentBox
        v-if="videoList.length"
        title="展示视频"
      >
        <view
          v-for="item in videoList"
          :key="item"
          class="mb-16rpx"
        >
          <video
            class="w-full h-300rpx"
            :src="item"
            :autoplay="false"
          />
        </view>
      </ContentBox>
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
